<script lang="ts">
	import type { LZIZY_Video, LZIZY_Video_Base } from "$lib/api/lzizy/interface";


	let {data, onClick}:{data: Array<LZIZY_Video_Base|LZIZY_Video>, onClick: (index: number) => void} = $props();
</script>

<main>
	<!-- <div class="list"> -->
		<ul>
			{#each data as item, index}
				<div class="video-info" onclick={() => onClick(index)}>
					<div class="title">
						<p>{item.name}</p>
					</div>

					<div class="cover" >
						<img src={item.cover_url} alt="封面图">
					</div>
				</div>
			{/each}
		</ul>
	<!-- </div> -->
</main>

<style lang="scss">
	@use "/src/styles/global.scss" as *;

	main {
		width: 100%; height: 100%;
		// background-color: aliceblue;
		padding: 5px 0 5px 5px;
		overflow: scroll;
	}
	ul {
		width: 100%; height: 100%;
		// background-color: brown;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 50vh; gap: 5px;
		
	}
	.video-info{
		width: 100%; height: 100%;
		// background-color: #0091ff;
		// margin: auto;
		display: grid;
		grid-template-rows: 10% 1fr;
	}

	.title {
		display: flex;
		p {
			margin: auto;
		}
	}
	.cover {
		overflow: hidden;
		& > img {
			width: 100%; max-height: 100%;
		}
	}
	
	@include hide-scrollbar;
</style>